<template>
  <div>
    <el-row type='flex' justify='center' :gutter="50">
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-button v-show="!isSeated3" type="primary" round @click="selectSeat(3)">选择座位</el-button>
          <img :src="icon3" width="150px" height="auto">
        </div>
      </el-col>
      <el-col :span="2">
        <!-- 下面的@click="mayStart = true"意思是：点击之后让mayStart的值变成true-->
        <el-button :disabled="this.seatedCount === 0" type="success" round @click="mayStart = true">开始游戏</el-button>
        <el-dialog center title="提示" :visible.sync="mayStart" width="30%" :before-close="handleClose">
          <span>请选择游戏参数</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="mayStart = false">取 消</el-button>
            <el-button type="primary" @click="startNewGame()">确 定</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="5" :offset="1">
        <div class="grid-content bg-purple">
          <el-button v-show="!isSeated4" type="primary" round @click="selectSeat(4)">选择座位</el-button>
          <img :src="icon4" width="150px" height="auto">
        </div>
      </el-col>
      <el-col :span="5" :offset="10">
        <div class="grid-content bg-purple">
          <el-button v-show="!isSeated2" type="primary" round @click="selectSeat(2)">选择座位</el-button>
          <img :src="icon2" width="150px" height="auto">
        </div>
      </el-col>
    </el-row>
    <el-row type='flex' justify='center'>
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-button v-show="!isSeated1" type="primary" round @click="selectSeat(1)">选择座位</el-button>
          <img :src="icon1" width="150px" height="auto">
          <!-- <div id="photo4"></div> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      seatedCount: 0,
      icon1: '',
      icon2: '',
      icon3: '',
      icon4: '',
      isSeated1: false,
      isSeated2: false,
      isSeated3: false,
      isSeated4: false,
      mayStart: false,
      socket: null
    }
  },
  methods: {
    selectSeat (seatNum) {
      axios
        .get('http://127.0.0.1:9000/selectSeat', {
          params: {
            seatNum: seatNum
          }
        }).then(response => {
          if (response.data.code === 200) {
            alert(response.data.message)
            // 选座成功之后，立即刷新当前组件
            this.reloadPage()
          }
          if (response.data.code === 500) {
            alert(response.data.message)
          }
        }).catch(function (error) {
          this.$message({ message: '选座失败' + error, type: 'error' })
        })
    },
    // 注意，这是一个抽取出来的公共方法
    reloadPage () {
      axios
        .get('http://127.0.0.1:9000/querySeated')
        .then(response => {
          let playerList = response.data.data
          this.seatedCount = response.data.data.length
          playerList.forEach(element => {
            // 下面的语句是为了判断选座按钮显示与否,头像显示与否
            if (element.seatNum === 1) {
              this.icon1 = element.icon
              this.isSeated1 = true
            } else if (element.seatNum === 2) {
              this.icon2 = element.icon
              this.isSeated2 = true
            } else if (element.seatNum === 3) {
              this.icon3 = element.icon
              this.isSeated3 = true
            } else {
              this.icon4 = element.icon
              this.isSeated4 = true
            }
          })
        }).catch(function (error) {
          this.$message({ message: '获取失败' + error, type: 'error' })
        })
      //  如果当前已经有4人选座成功，则房主可以开启游戏
    },
    openSocket () {
      let thant = this
      if (typeof WebSocket === 'undefined') {
        console.log('您的浏览器不支持WebSocket')
      } else {
        console.log('您的浏览器支持WebSocket')
        // 实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        // 等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
        // var socketUrl="${request.contextPath}/im/"+$("#userId").val();
        var socketUrl =
          'http://127.0.0.1:9000/seatedRefresh/' + window.sessionStorage.getItem('userId')
        socketUrl = socketUrl.replace('http', 'ws')
        console.log(socketUrl)
        if (this.socket != null) {
          console.log('当前页面存在着连接，现在进行关闭')
          this.socket.close()
          this.socket = null
        }
        // this.socket = new WebSocket(socketUrl)   这里怎么多出来一行？
        // 打开事件
        this.socket = new WebSocket(socketUrl)
        // 打开事件
        this.socket.onopen = function () {
          console.log('websocket已打开')
          // socket.send("这是来自客户端的消息" + location.href + new Date());
        }
        // 获得消息事件
        this.socket.onmessage = function (msg) {
          // console.log(msg.data)
          // alert(msg.data)
          if (msg.data === '有人进入房间') {
            // 发现消息进入    开始处理前端触发逻辑
            thant.reloadPage()
          }
        }
        // 关闭事件
        this.socket.onclose = function () {
          console.log('websocket已关闭')
        }
        // 发生了错误事件
        this.socket.onerror = function () {
          console.log('websocket发生了错误')
        }
      }
    }
  },
  mounted () { // querySeated
    // 先建立连接
    console.log('this' + this)
    this.openSocket()
    // alert(this.seatedCount)
    // 再刷新一次页面
    this.reloadPage()
    //  (定时器的写法)注意为方法名的时候不要加括号,第二个参数为时间间隔
    // this.timer = setInterval(this.reloadPage, 1000)
  }
}
</script>
<style>
.el-row {
  /* 两个行之间的距离 */
  margin-bottom: 100px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #0c59f1;
}
</style>
